<template>
  <div id="home-about" class="component">
    <div id="home-about-main" class="ptop">
      <div class="slogen"></div>
      <div class="abouts-main">
        <!--圆形区域-->
        <transition name="circleMove">
          <div class="abouts-wrap" v-if="isShow">
            <div class="abouts-top-wrap circleContainer" id="abouts-top">
              <aboutComponent :circleInfo="aboutsList.top"></aboutComponent>
            </div>
            <div class="abouts-left-wrap circleContainer" id="abouts-left">
              <aboutComponent :circleInfo="aboutsList.left"></aboutComponent>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  import aboutComponent from '@/components/home/aboutscircle'
  export default {
    data () {
      return {
        message: '查看更多',
        aboutsList: {
          top: {src: require('@/assets/home/about-pic.png'), numMsg: '四川科瑞软件有限责任公司成立于2002年，秉承“创新驱动、协同发展”的理念，坚持“产品驱动、品牌驱动、技术驱动”重要战略，专注于互联网领域，以“觅来”为核心，整体形成“互联网+商业运营”的具有自身业务特点和核心竞争力的科技企业，业务主要涵盖：网格化电子商务、互联网技术和运营服务、互联网+政务服务和行业解决方案等。\n公司目前通过了CMMI3级认证、GJB9001B：2009/ISO9001：2008认证。公司拥有信息系统集成与服务“三级”资质证书、中国合格评定国家认可委员会实验室认可证书、国家二级保密资质证书，并且获得了100余项软件著作权。公司一直坚持技术创新，先后承担了国家科技部863计划和科技支撑计划、十五科技攻关、国家发改委高技术产业化项目等，并多次获得商务部及省、市多个部门的相关政策支持和表彰奖励。十五年间，公司先后合作服务过上千家企业、上万个个人，客户广泛覆盖全国华北、华东、西北、西南、东北等80余个城市，具备“软件+服务”综合业务能力和强大服务优势；同时公司现拥有O2O核心渠道合作伙伴超过10000家，与建设银行、民生银行、平安银行、招商银行、浦发银行、光大银行、中国银行、北京银行、京东商城、国美在线、卓越亚马逊等各类电子商务特色平台和知名企业建立了深入的合作关系，其中电子商务综合服务商银行业务排名全国第三，LENOVO THINK 系列全国排名第一。'},
          left: {src: require('@/assets/home/about-box.png')}
        }
      }
    },
    props: {
      isShow: {
        type: Boolean  // 触发显示隐藏动画
      }
    },
    components: {
      aboutComponent  // 圆形组件
    },
    methods: {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #home-about
    text-align: center
    background-image: url('../../assets/home/home-bg4.png')
    #home-about-main
      .slogen
        background-image: url("../../assets/home/about.png")
      .abouts-main
        position: relative
        margin:0 auto
        top: 40%
        max-width: 1200px
        .abouts-wrap
          position relative
          width:100%
          height: 300px
          transition: all .7s ease-in
          &.circleMove-enter-active
            .circleContainer
              opacity:1
            .circle-top-wrap
              transition-delay: 0.1s
            .circle-top-left,.circle-top-right
              transition-delay: 0.1s
          &.circleMove-enter,&.circleMove-leave-active

            .abouts-top-wrap
              top: 30px
              left: 0%
              opacity:0
            .abouts-left-wrap
              top: 15px
              left: 33%
              opacity:0
          &>div
            position: absolute
            transition:all 0.5s
            opacity: 1
            transition-timing-function: cubic-bezier(0, .57, .44, 1.97)

          .abouts-top-wrap
            top: 0px
            left: 0%
            transition:all 1s
            transition-delay: 0.2s
          .abouts-left-wrap
            top:  0px;
            left: 33%;
            transition:all 1s
            transition-delay: 0.2s
    .more
      width: 200px
      height: 50px
      line-height: 50px
      color: #fff
      display: inline-block
      margin-left: -220px
      margin-top: 70px
      background-color: rgba(0, 0, 0, .5)
      .arrow
        font-family: "SimSun"
        font-size: 16px
        font-weight: 700
        margin-left: 20px
</style>
